<template>
  <div class="xiaobu-container">
    <div class="weixin-card">
      <img
        class="weixin-img"
        src="http://www.xiaobu.host/static/gongzhonghao_QR_code.png"
        alt=""
      />
    </div>
    <el-card class="top-info-card">
      <div class="left-info">
        <img class="avatar" :src="userInfo.avatar" alt="" />
      </div>
      <el-descriptions class="right-info" title="" :column="2">
        <el-descriptions-item label="用户名">{{
          userInfo.userName
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          userInfo.sex | getLabelByCodeFilter("SEX")
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          userInfo.phoneNumber
        }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{
          userInfo.email
        }}</el-descriptions-item>
        <el-descriptions-item label="最近一次登录时间">{{
          userInfo.loginDate
        }}</el-descriptions-item>
        <el-descriptions-item label="最近一次登录IP">{{
          userInfo.loginIp
        }}</el-descriptions-item>
        <el-descriptions-item label="备注">
          {{ userInfo.remark }}
        </el-descriptions-item>
      </el-descriptions>
      <el-button class="edit-button" type="primary" @click="showEditUser = true"
        >编辑信息</el-button
      >
    </el-card>

    <el-card>
      <el-descriptions class="right-info" border title="vue2-element-admin简介" :column="1">
        <el-descriptions-item label="介绍">一款基于element组件库的后台管理系统</el-descriptions-item>
        <el-descriptions-item label="axios请求优化">
          使用了vue-axios-optimize插件包，轻松实现axios请求优化，可实现
          配置并发请求数量，接口数据缓存，阻止后面的重复请求或者取消前面的重复请求，全局请求动画，无感知刷新token
        </el-descriptions-item>
        <el-descriptions-item label="字典的简单使用">
          引入了vue2-element-dict字典包，一次配置后，一行代码轻松实现各种字典相关需求。
        </el-descriptions-item>
        <el-descriptions-item label="无感刷新token">
          实现了无感知刷新accessToken，accessToken过期自动使用refreshToken续签，且全程无感知。
        </el-descriptions-item>
        <el-descriptions-item label="页面及按钮权限控制">
          对页面及按钮实现前后端均有控制
        </el-descriptions-item>
        <el-descriptions-item label="系统管理">
          菜单管理更清晰明了，摆脱需要开发者配置菜单的败笔。全局配置管理，实现字典数据自动更新。字典管理可新增拓展json数据。
          角色管理及用户管理采用了史上最牛逼的分配弹框，更加清晰易操作。
        </el-descriptions-item>
      </el-descriptions>
    </el-card>

    <edit-user-info
      ref="editUserInfo"
      title="编辑信息"
      width="666px"
      :visible.sync="showEditUser"
      @close="showEditUser = false"
      :modal-append-to-body="false"
      :append-to-body="false"
      :close-on-click-modal="false"
    ></edit-user-info>
  </div>
</template>
<script>
import EditUserInfo from "@/components/edit-user-info/inedx"
export default {
  components: {
    EditUserInfo
  },
  data() {
    return {
      showEditUser: false,
      baseForm: {
        avatar: "", // 头像
        userName: "" // 用户
      }
    }
  },
  watch: {
    showEditUser(val) {
      this.$nextTick(() => {
        this.$refs.editUserInfo.resetDialogForm()
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.xiaobu-container {
  padding-bottom: 128px !important;
  .top-info-card {
    margin-bottom: 24px;
    ::v-deep .el-card__body {
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      position: relative;
      .edit-button {
        position: absolute;
        top: 20px;
        right: 20px;
      }
      .left-info {
        width: 168px;
        .avatar {
          width: 100%;
          vertical-align: middle;
        }
      }
      .right-info {
        margin-left: 20px;
        margin-top: 20px;
      }
    }
  }

  .weixin-card {
    width: 300px;
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 9;
    .weixin-img {
      display: block;
      width: 100%;
    }
  }
}
</style>
